<template>
  <div>
    <el-container>
      <!-------------------Aside-------------------------->
      <el-aside width="13vw" style="background-color: white;">
        <el-col>
          <el-row>
            <el-menu>
              <el-menu-item style="margin-left:10px;font: 20px '微软雅黑 Light'; color: #00CB8E;line-height: 80px;">信息栏导航
              </el-menu-item>
              <el-divider style="display: block;line-height: 2px "></el-divider>
              <div style="padding-left: 15px;font: 15px '微软雅黑 Light'">
                <el-menu-item>医院介绍</el-menu-item>
                <el-menu-item>疾病科室</el-menu-item>
                <el-menu-item>医生团队</el-menu-item>
                <el-menu-item>文章列表</el-menu-item>
                <el-menu-item>活动列表</el-menu-item>
              </div>
              <el-divider style="display: block;line-height: 2px "></el-divider>
              <img style="width:70%;margin-left: 15%" src="/img/code.png" alt="">
            </el-menu>
          </el-row>
        </el-col>
      </el-aside>
      <!-------------------Aside-------------------------->

      <!-------------------Main-------------------------->
      <el-main>
        <!--聊天框部分-->
        <el-row :gutter="5">
          <router-view/>
          <!--****************************************************************************-->
          <!--右侧信息-->
          <el-col :span="8">
            <el-card style="border-radius: 10px;width: 100%">
              <!--相关疾病-->
              <div style="margin: 15px 5px 5px 5px">
                <span style="font-size: 110%">相关疾病</span>
                <a class="a" style="float: right" href="/encyclopedia">查看全部</a>
              </div>
              <div style="position: relative; margin-top: 10px">
                <div v-for="item in otherArticle" style="display: inline-block">
                  <el-button style="padding: 10px;border-radius: 20px;margin-left: 10px">
                    <a class="a" :href="'/encDetail?articleId='+item.id">{{ item.title }}</a>
                  </el-button>
                </div>
                <div style="margin-top: 5px">

                </div>
                <el-divider></el-divider>
                <!--相关医生-->

                <div style="margin: 5px">
                  <span style="font-size: 110%;margin-bottom: 5px">相关医生</span>
<!--                  <a class="a" style="float: right" href="">查看全部</a>-->
                </div>
                <div style="margin-top: 10px">
                  <el-row style="margin-bottom: 15px" v-for="(consultDr,i) in consultDr">
                    <el-col :span="4">
                      <img style="width:50px;height:50px; border-radius: 100px;" :src="consultDr.avatar">
                    </el-col>
                    <el-col :span="20">
                      <p style="font:15px '微软雅黑 Light';color: #00CB8E;font-weight: bold;margin-bottom: 5px">
                        {{ consultDr.name }}</p>
                      <p style="font: 12px '微软雅黑 Light';margin: 0">{{ consultDr.depTitle }}</p>
                      <span style="font: 12px '微软雅黑 Light';margin: 0">{{ consultDr.hospital }}</span> |
                      <span style="font: 12px '微软雅黑 Light';margin: 0">{{ consultDr.duty }}</span>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>

                  <!--相关文章-->
                  <div>
                    <span style="font-size: 110%">相关文章</span>
                    <a class="a" style="float: right" href="/encyclopedia">查看全部</a>
                  </div>
                  <div>
                    <ul v-for="item in otherArticle">
                      <li style="margin:10px 10%;font-size: 14px"><a class="chat-othercontent" :href="'/encDetail?articleId='+item.id">{{item.content}}</a></li>
                    </ul>
                  </div>
                </div>
                <el-divider></el-divider>
                <!--联系我们-->
                <div style="margin-bottom: 10px">
                  <div>
                    <span style="font-size: 110%">联系我们</span>
                    <a class="a" style="float: right" href="">查看全部</a>
                  </div>
                  <div>
                    <ul v-for="item in otherArticle1">
                      <li style="margin:10px 10%;font-size: 14px"><a class="a" href="">{{ item }}</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<style>
body {
  margin: 0 auto;
  padding: 0;
    background-image: none;
}

.a {
  text-decoration: none;
  color: #4a4a4a;
}

/*---------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.other-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.other-info .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.chat-othercontent {
  color: black;
  overflow: hidden;
  /*设置超出的部分用省略号展示*/
  display: -webkit-box;
  -webkit-line-clamp: 1; /*设置显示的行数*/
  -webkit-box-orient: vertical; /*设置纵向排列*/
}

/*---------------------------------------------------------*/
</style>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data() {
    return {
      loginInfo: [],
      Sympton: [],
      consultDr: [],
      otherArticle: [],
      otherArticle1: [
        "联系电话：820-820-8820", "公众号：四叶草医院", "地址：重庆市九龙坡区袁家岗"
      ]
    }
  },
  methods: {
    loadCurrentLoginInfo() {
      let loginInfoString=localStorage.getItem('loginInfo')

      this.loginInfo = JSON.parse(loginInfoString);
      if (!this.loginInfo) {
        this.$router.push('/login/user');
        return;
      }else if (this.loginInfo.role===5){
        this.$message.error('无权访问');
        this.$router.push('/home');
        return;
      }
    },
    loadConsultDr() {
        let department=new URLSearchParams(location.search).get("depId");
        let patientUrl = BaseUrl.CHAT + '/chat/consultDr/'+department;

        TokenAxios.get(patientUrl).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state === 20000) {
            this.consultDr = response.data.data;
          }
        })
    },
    loadOtherArticle() {
        let department=new URLSearchParams(location.search).get("depId");
        let patientUrl = BaseUrl.CHAT + '/chat/otherArticle/'+department;

        TokenAxios.get(patientUrl).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state === 20000) {
            this.otherArticle = response.data.data;
          }
        })
    }
  },
  created() {

  },
  mounted() {

    this.loadCurrentLoginInfo();
    this.loadConsultDr();
    this.loadOtherArticle();
  }
}
</script>